<template>
  <view class="container" v-if="loadEnd">
    <form @submit="modify">
      <view class="info-item">
        <view class="info-item-title">头像</view>
        <view class="head-pic">
          <button open-type="chooseAvatar" @chooseavatar="bindchooseavatar">
            <image
              :src="avatar || '/static/login/user.png'"
              alt=""
              mode="aspectFill"
            ></image>
            <view style="flex: 1"></view>
          </button>
        </view>
      </view>
      <view class="info-item">
        <view class="info-item-title">昵称</view>
        <view class="nickname"
          ><input
            type="nickname"
            name="nickname"
            :value="nickname"
            placeholder="请输入昵称"
          />
        </view>
      </view>
      <block v-if="first == 'false' && oldPhone != ''">
        <view class="info-item">
          <view class="info-item-title">旧手机号</view>
          <view class="old-phone">{{ oldPhone }}</view>
        </view>
        <view class="info-item">
          <view class="info-item-title">新手机号</view>
          <view class="info-item-input"
            ><input
              type="number"
              placeholder="请输入手机号码"
              placeholder-class="placeholder"
              maxlength="11"
              v-model="newPhone"
          /></view>
          <view class="countdown" v-if="countdown && countdown > 0"
            >{{ countdown }}秒</view
          >
          <view class="send-code" @click="getCode()" v-else>发送验证码</view>
        </view>
        <view class="info-item">
          <view class="info-item-title">验证码</view>
          <view class="info-item-input-captcha"
            ><input
              type="text"
              placeholder="请输入验证码"
              placeholder-class="placeholder"
              maxlength="6"
              v-model="captcha"
          /></view>
        </view>
        <view class="info-item">
          <view class="info-item-title" @click="chooseschool"
            >切换学校</view
          ></view
        >
      </block>
      <view class="confirm-btn">
        <button class="confirm-world" form-type="submit">确定</button>
        <view class="safe-padding"></view>
      </view>
    </form>
  </view>
</template>

<script>
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  data() {
    return {
      loadEnd: false,
      first: false,
      avatar: "",
      nickname: "",
      newPhone: "",
      oldPhone: "",
      captcha: "",
      // 验证码
      captcha: "",
      // 验证码倒计时
      countdown: 0,
      // 定时器
      interval: null,
    };
  },
  onLoad(options) {
    this.getPhone();
    // 等待0.5秒.显示页面
    setTimeout(() => (this.loadEnd = true), 500);
    this.first = options.first;
    if (options.first == "true") {
      uni.setNavigationBarTitle({
        title: "设置信息",
      });
    } else {
      uni.setNavigationBarTitle({
        title: "修改信息",
      });
      if (uni.getStorageSync("user_info")) {
        this.avatar = uni.getStorageSync("user_info").avatar || "";
        this.nickname = uni.getStorageSync("user_info").nickname || "";
      }
    }
  },
  methods: {
    chooseschool() {
      var path = "/pages/Component/Module/Campus/Program/school/index/index";
      ikz.nav(path, "n", "");
    },
    // 获取手机号
    getPhone() {
      var path = "/xyb/user_wechat/mobile";
      var data = {};
      ikz.get(path, data, (res) => {
        if (res.statusCode == 200) {
          this.oldPhone = res.data.data.mobile;
          console.log("旧手机号是", this.oldPhone);
        } else {
          uni.showModal({
            title: "提示",
            content: "服务器繁忙，请稍后再试",
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    // 获取验证码
    getCode() {
      if (this.newPhone == "") {
        uni.showToast({
          title: "请先填写手机号后获取验证码",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      var path = "/sms/send";
      var data = { mobile: this.newPhone };
      ikz.requestPost(path, data, (res) => {
        if (res.data.code == 1) {
          uni.showToast({
            title: "验证码已发送",
            icon: "none",
            duration: 2000,
          });
          clearInterval(this.interval);
          this.countdown = 60;
          this.interval = setInterval(() => {
            if (this.countdown <= 1) {
              clearInterval(this.interval);
              this.countdown = 0;
            } else this.countdown--;
          }, 1000);
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    bindchooseavatar(val) {
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      uni.uploadFile({
        url: app.globalData.adminPath + "/common/upload",
        filePath: val.detail.avatarUrl,
        name: "file",
        formData: {
          token: uni.getStorageSync("local_user_session"),
        },
        success: (uploadFileRes) => {
          if (uploadFileRes.code == 401) {
            console.log(uni.getStorageSync("local_user_session"));
          } else {
            this.avatar =
              app.globalData.adminImgPath +
              JSON.parse(uploadFileRes.data).data.url;
          }
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    modify(e) {
      this.nickname = e.detail.value.nickname;
      let title = "";
      if (!this.avatar) {
        title = "请上传头像";
      } else if (!this.nickname) {
        title = "请输入昵称";
      }
      if (title) {
        uni.showToast({
          title,
          icon: "none",
          duration: 2000,
        });
      } else {
        let path = "/xyb/user_wechat/update_nickname_avatar";
        let data = {
          token: uni.getStorageSync("local_user_session"),
          nickname: this.nickname,
          avatar: this.avatar,
          mobile: this.newPhone,
          captcha: this.captcha,
        };
        if (this.avatar == uni.getStorageSync("user_info").avatar) {
          data.avatar = "";
        }
        ikz.requestPost(path, data, (res) => {
          if (res.data.code == 1) {
            let title = "";
            if (this.first == "true") {
              title = "设置成功";
            } else {
              title = "修改成功";
            }
            uni.setStorageSync("user_info", res.data.data.user_info);
            getApp().globalData.mobile = res.data.data.user_info.mobile;
            uni.showToast({
              title,
              icon: "none",
            });
            setTimeout(() => {
              if (this.first == "true") {
                uni.navigateTo({
                  url: "/pages/Home/index",
                });
              } else {
                uni.navigateBack();
              }
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 颜色变量 */
$primary-color: #ffc045;
$secondary-color: #666;
$text-color: #333;
$light-text: #999;
$border-color: #eee;
$white: #fff;
$shadow-color: rgba(0, 0, 0, 0.1);

/* 基础样式 */
page {
  background-color: #f8f8f8;
}

.container {
  padding-bottom: 120rpx;

  .info-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin: 0 20rpx;
    background: $white;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx $shadow-color;
    margin-bottom: 20rpx;
    transition: all 0.2s ease;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 1rpx 4rpx $shadow-color;
    }

    .info-item-title {
      flex: 1;
      font-size: 30rpx;
      font-weight: 600;
      color: $text-color;
    }

    .info-item-input {
      width: 240rpx;
      font-size: 28rpx;
      text-align: right;

      .placeholder {
        color: $light-text;
      }
    }

    .countdown {
      font-size: 28rpx;
      color: $secondary-color;
    }

    .send-code {
      font-size: 28rpx;
      color: $primary-color;
      font-weight: 600;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      background: rgba($primary-color, 0.1);
      transition: all 0.2s ease;

      &:active {
        background: rgba($primary-color, 0.2);
      }
    }

    .head-pic {
      button {
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
         &::after {
          border: none;  // 去掉按钮默认边框
        }

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          border: 2rpx solid rgba($primary-color, 0.3);
        }
      }
    }

    .nickname input,
    .info-item-input input,
    .info-item-input-captcha input {
      width: 100%;
      text-align: right;
      font-size: 28rpx;
      color: $text-color;
    }

    .old-phone {
      font-size: 28rpx;
      color: $text-color;
    }
  }

  .confirm-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    background: $white;
    box-shadow: 0 -4rpx 12rpx $shadow-color;

    .confirm-world {
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      font-weight: 600;
      background: linear-gradient(
        135deg,
        $primary-color,
        darken($primary-color, 10%)
      );
      border-radius: 44rpx;
      color: white;
      transition: all 0.2s ease;

      &:active {
        opacity: 0.9;
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .container .info-item {
    padding: 24rpx;
    margin: 0 16rpx 16rpx;

    .info-item-title {
      font-size: 28rpx;
    }
  }
}
</style>